<template>
  <div class="store-collect-wap" >
        <van-nav-bar
		  title="收藏"
		  left-arrow
		  fixed
		  @click-left="onClickLeft"
		/>

        <div 
        @click="handleToTypeChange"
        class="fix-del active-btn" >{{ isDel ? '完成' : '管理' }}</div>

        <div class="collect-ul" >
            <!-- 店铺列表 -->
            <van-list
                v-model="loadingPage"
                :finished="finished"
                :finished-text="list.length ? '没有更多了' : ''"
                @load="ajaxGoodList"
                >
                
                    <div v-if="finished && !list.length" class="empty-good" >
                        <van-empty description="暂无店铺" />
                    </div>
                    
                    <!-- 商品列表 -->
                    <!-- 商品列表 -->
                    <div class="good-ul" >
                        <storeGoodItem
                        v-for="(item, index) in list"
                        :key="index"
                        :item="item"
                        :isDel="isDel"
                        @storeInfo="storeInfo"
                        @selectItem="selectItem(index)"
                        ></storeGoodItem>
                    </div>
                
                </van-list>
        </div>


        <div 
        v-if="isDel"
        class="cart-cash-bottom-box" >
            <div 
            @click="handleToAll"
            class="cart-all-select" >
                <img class="cart-select-icon" :src="isAll ? defaultTagIcon : cartCircleIcon" alt="">
                <div class="cart-select-label" >全选</div>
            </div>
            <div class="cart-all-price" >
                <div @click="handleToSubmit" class="cart-all-btn active-btn" >删除</div>
            </div>
        </div>

  </div>
</template>

<script>
import storeGoodItem from './components/store-good-item';
import { STORE_COLLECT_LIST, STORE_COLLECT_DEL } from '@/api/store';
import { 
    cartCircleIcon, defaultTagIcon
} from '@/tool/static-img';
export default {
    components: {
        storeGoodItem
    },
    data() {
        return {
            cartCircleIcon, defaultTagIcon,
            isDel: false,
            isAll: false,
            // 分页
            page: 1,
            pageSize: 20,
            list: [],
            loadingPage: false,
            finished: false,
        }
    },
    methods: {
        onClickLeft() {
            this.$router.back()
        },
        handleToTypeChange() {
            this.isDel = !this.isDel;
        },
        resetInit() { //重置
            this.page = 1;
            this.list = [];
            this.finished = false;
            this.loadingPage = true;
            this.ajaxGoodList()
        },
        // 列表请求
        ajaxGoodList() {
            const latAndLng = localStorage.getItem('latAndLng');

            let params = {};
            params['page_num'] = this.page;
            params['page_size'] = this.pageSize;
            params['longitude'] = latAndLng.split(',')[1];
            params['latitude'] = latAndLng.split(',')[0];
            
            this.$http.get(STORE_COLLECT_LIST, {
                params
            })
            .then(res => {
                const {
                list
                } = res.data;
            
                if(list && list.length) {
                    this.page++;
                    list.forEach(item => {
                        item.select = false;
                    })
                    this.list = this.list.concat(list);
                    // 加载状态结束
                    this.loadingPage = false;
                    if(list.length < this.pageSize) {
                    this.finished = true;
                    }
                }else {
                    this.finished = true;
                }
            })
        },
         // 进店铺
        storeInfo(id) {
            const latAndLng = localStorage.getItem('latAndLng');

            this.$router.push({
                name: 'storeInfo',
                query: {
                    id,
                    longitude: latAndLng.split(',')[1],
                    latitude: latAndLng.split(',')[0],
                }
            })
        },
        // 选择
        selectItem(index) {
            const list = JSON.parse(JSON.stringify(this.list));
                  list[index].select = !list[index].select;
                  this.list = list;

                  const isAll = list.every(item => {
                      return item.select
                  })

                  this.isAll = isAll;
        },
        // 全选
        handleToAll() {
            this.isAll = !this.isAll;
            const list = JSON.parse(JSON.stringify(this.list));
            list.forEach(item => {
                item.select = this.isAll;
            })
            this.list = list;
        },
        // 删除
        handleToSubmit() {
            const hasSelect = this.list.some(item => {
                return item.select
            })
            if(!hasSelect) {
                this.$toast('请选择')
                return
            }

            let ids = [];
                this.list.forEach(item => {
                    if(item.select) {
                        ids.push(item.id)
                    }
                })

            this.$http.post(STORE_COLLECT_DEL, {
                ids
            })
            .then(res => {
                this.resetInit();
                this.$toast.success('删除成功');
            })

        }
    }
}

</script>
<style lang='scss' >
.store-collect-wap{
    min-height: 100vh;
    padding-top: 46px;
    background-color: #f5f5f5;
    padding-bottom: calc(1rem + constant(safe-area-inset-bottom));
    padding-bottom: calc(1rem + env(safe-area-inset-bottom));
    box-sizing: border-box;
    .van-nav-bar .van-icon{
        color: #333333;
    }
    .van-nav-bar__arrow{
        font-size: 20px;
    }
    .fix-del{
        position: fixed;
        right: 16px;
        top: 0;
        z-index: 2;
        height: 46px;
        line-height: 46px;
        font-weight: 400;
        font-size: 0.28rem;
        color: #333333;
    }
    .collect-ul{
        padding: 0.24rem 0.24rem 0;
    }

    .cart-cash-bottom-box{
            display: flex;
            align-items: center;
            justify-content: space-between;
            position: fixed;
            bottom: 0;
            left: 0;
            height: 0.96rem;
            width: 100%;
            padding-bottom: constant(safe-area-inset-bottom);
            padding-bottom: env(safe-area-inset-bottom);
            background: #ffffff;
            .cart-all-select{
                display: flex;
                align-items: center;
                .cart-select-icon{
                    width: 0.3rem;
                    height: 0.3rem;
                    padding: 0.24rem;
                }
                .cart-select-label{
                    font-size: 0.28rem;
                    font-weight: 500;
                    color: #333333;
                }
            }
            .cart-all-price{
                display: flex;
                align-items: center;
                .cart-all-btn{
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    width: 2.08rem;
                    height: 0.72rem;
                    margin-right: 0.24rem;
                    font-weight: 500;
                    font-size: 0.32rem;
                    color: #ffffff;
                    border-radius: 0.36rem;
                    background: linear-gradient( 135deg, #FF5851 0%, #F1231C 100%);
                }
            }
        }
}
</style>